<template>
  <div class="driver-wrapper">
    <el-dialog
      title="选择属性"
      :visible.sync="dialogVisible"
      width="800px  "
      class="tableDialog"
      :close-on-click-modal="false"
      append-to-body
      @open="getCompanyList"
    >
      <div class="dialog-container">
        <div class="container">
          <section class="driver-search">
            <section class="dialogSearch">
              <el-input
                v-model="inputName"
                size="small"
                placeholder="请输入属性"
                @input="getList2($event, true)"
              >
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </section>

            <el-table
              size="mini"
              v-loading="loading"
              :data="tableData"
              style="width: 100%; margin-top: 10px"
              border
              :header-cell-style="{
                'background-color': '#eeeeee !important',
              }"
              :row-class-name="tableRowClassName"
            >
              <el-table-column
                type="index"
                label="序号"
                width="60"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{
                    (page.pageNo - 1) * page.pageSize + scope.$index + 1
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="names"
                label="名称"
                width="180px"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="describes"
                label="属性说明"
                align="left"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column label="操作" width="72px">
                <template slot-scope="scope">
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="selectRow(scope.row)"
                    >选择
                  </el-link>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :page-size="page.pageSize"
              :current-page="page.pageNo"
              layout="total,prev, pager, next"
              :total="page.total"
            >
            </el-pagination>
          </section>
        </div>
      </div>
    </el-dialog>
    <div class="editForm-wrapper">
      <el-dialog
        title="编辑车辆分组属性值"
        :close-on-click-modal="false"
        v-dialogDrag
        append-to-body
        :visible.sync="visible"
      >
        <el-form
          :model="inputForm"
          ref="inputForm"
          v-loading="loading"
          label-width="96px"
        >
          <el-form-item label="属性名称:" prop="names">
            <el-input
              v-model="inputForm.names"
              placeholder=""
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="属性说明:" prop="describes">
            <el-input
              v-model="inputForm.describes"
              placeholder=""
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item
            label="属性值:"
            prop="svalue"
            :rules="[
              { required: true, message: '属性值不能为空', trigger: 'blur' }
            ]"
          >
            <el-input
              v-model="inputForm.svalue"
              placeholder="请填写属性值"
              v-if="
                inputForm.componentType === 4 || inputForm.componentType === 5
              "
            ></el-input>
            <el-select clearable
              v-model="inputForm.svalue"
              v-else
              placeholder="请填写属性值"
            >
              <el-option
                v-for="item in $dictUtils.getDictList(inputForm.dictCode)"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <div class="footer-input">
            <el-button type="primary" @click="doSubmit()" v-noMoreClick
              >确定</el-button
            >
            <el-button @click="visible = false">取消</el-button>
          </div>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getVarByModularId, save } from "@/api/truck/truckGroup.js";

export default {
  data() {
    return {
      visible: false,
      inputForm: {
        codes: "",
        dictCode: "",
        componentType: -1,
        describes: "",
        id: "",
        names: "",
        otherUse: "",
        props: "",
        sgroup: "",
        state: "",
        svalue: "",
        tenantAutho: "",
      },
      title: "",
      tableData: [],
      loading: false,
      dialogVisible: false,
      inputName: "",
      data: [],
      page: {
        pageSize: 10,
        pageNo: 1,
        total: 20,
      },
    };
  },
  methods: {
  	handleClose(done) {
		this.$Msg.confirm({
			title:'您确定要关闭吗？',
			content:this.GLOBAL.FORM_CLOSE_TIPS,
			confirmCall:()=>{
				done();
			}
		})
	},
    handleCurrentChange(e) {
      this.page.pageNo = e;
      this.getCompanyList(this.page);
      console.log(e);
    },
    // 获取列表
    getCompanyList(params) {
      getVarByModularId({
        otherUse: ',2,',
        truckGroupId: this.$store.state.truck.detailId,
      }).then((res) => {
        if (res.data.code === "200") {
          this.tableData = res.data.result.list;
          this.page.total = res.data.result.count;
          console.log(this.page.total);
        }
      });
    },

    // 点击树获取列表和搜索获取列表
    getList2($event, isSearch) {
      console.log($event);
      if (isSearch) {
        // getVarByModularId({names: $event}).then((res) => {
        //   if (res.data.code === '200') {
        //     this.tableData = res.data.result.list
        //     this.page.total = res.data.result.count
        //     console.log(this.page.total)
        //   }
        // })
      }
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    // 选择行
    selectRow(row) {
      this.inputForm = row;
      // this.$emit('getProperty', row)
      this.visible = true;
      //this.dialogVisible = false
    },
    doSubmit() {
      save({
        truckGroupId: this.$store.state.truck.detailId,
        varSn: this.inputForm.codes,
        varName: this.inputForm.names,
        varDescribe: this.inputForm.describes,
        varValue: this.inputForm.svalue,
        // id:this.inputForm.id
      }).then((res) => {
        this.$emit("getProperty", this.inputForm);
      });

      this.visible = false;
      this.dialogVisible = false;
    },

    close() {},
  },
  mounted() {
    this.getCompanyList(this.page);
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-pagination {
  margin-top: 30px;
  text-align: right;
}

::v-deep .el-input__inner {
  width: 320px;
}
.dialog-container {
  width: 100%;
}

.container {
  width: 100%;
  /*height: 500px;*/
  display: flex;
}

.left-container {
  margin-right: 20px;
  width: 100px;
  overflow: auto; /*当内容超过，出现滚动条*/
}

.el-table .success-row {
  background: #f0f9eb;
}

::v-deep .el-table .warning-row {
  background: #f7f7f7;
}
.footer-input {
  width: 160px;
  margin: 0 auto;
}
.driver-search {
  width: 800px;
}
</style>
